import React from 'react'
import ReactDOM from 'react-dom/client'

function BoilingVerdict (props) {
    return props.celsius >= 100 ? <p>The water would boil.</p> : <p>The water would not boil.</p>
}

function toCelsius (fahrenheit) {
    return (fahrenheit - 32) * 5 / 9
}

function toFahrenheit (celsius) {
    return (celsius * 9 / 5) + 32
}

function tryConvert (temperature, convert) {
    const input = parseFloat(temperature)
    if (Number.isNaN(input)) {
        return ''
    }
    const output = convert(input)
    const rounded = Math.round(output * 1000) / 1000
    return rounded.toString()
}

const scaleNames = {
    c: 'Celsius',
    f: 'Fahrenheit'
}
class TemperatureInput extends React.Component {
    handleChange = (event) => {
        this.props.onChange(event.target.value)
    }
    render () {
        let temperature = this.props.value
        let scale = this.props.scale
        return (
            <fieldset>
                <legend>Enter temperature in {scaleNames[scale]}:</legend>
                <input type="text" value={temperature} onChange={this.handleChange} />
            </fieldset>
        )
    }
}

class Calculator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
            scale: 'c',
        }
    }

    handleCelsiusChange = (value) => {
        this.setState({ scale: 'c', value: value })
    }
    handleFahrenheitChange = (value) => {
        this.setState({ scale: 'f', value: value })
    }

    render () {
        const scale = this.state.scale
        const temperature = this.state.value
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature
        return (
            <div>
                <TemperatureInput scale='c' value={celsius} onChange={this.handleCelsiusChange} />
                <TemperatureInput scale='f' value={fahrenheit} onChange={this.handleFahrenheitChange} />
                <BoilingVerdict celsius={parseFloat(celsius)} />
            </div>
        )
    }
}

ReactDOM.createRoot(document.getElementById('root')).render(<Calculator />)